<template>
  <div class="container">
    <div class="title">
      <p>预约日历</p>
    </div>
    <div class="cal">
      <div class="left">
        <!-- <div class="control"> -->
        <!-- 上一个月 -->
        <!-- <button class="prevm" @click="prevMonth(value)"></button>
          <el-date-picker v-model="value" align="right" type="date" placeholder="请输入日期" :picker-options="pickerOptions" :clearable="false"> </el-date-picker> -->
        <!-- 下一个月 -->
        <!-- <button class="nextm" @click="nextMonth(value)"></button>
        </div> -->
        <el-calendar v-model="value" id="calendar">
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template slot="dateCell" slot-scope="{ data }">
            <p>
              <!--这里原本有动态绑定的class，去掉-->
              {{ data.day.split('-').slice(2).join('') }}
            </p>
            <span>{{ dealMyDate(data.day) }}</span>
          </template>
        </el-calendar>
      </div>
      <div class="right">
        <div class="title">{{ transDate() }}</div>
        <div class="detail">
          <ul v-if="tableData.length > 0">
            <li v-for="item in this.tableData" :key="item.id">
              <div class="des1">
                <p class="p1">{{ item.name }}</p>
                <p class="p2">{{ item.telephone }}</p>
                <p class="p3" v-if="item.type == 2">维修</p>
                <p class="p3" v-else-if="item.type == 1">贴膜</p>
                <p class="p3" v-else-if="item.type == 0">洗车</p>
                <p class="p3" v-else-if="item.type == 3">改装</p>
              </div>
              <div class="des2">
                <p class="p4">{{ item.carId }}</p>
                <p class="p5">{{ item.reserveDateTime }}</p>
              </div>
            </li>
          </ul>
          <div v-else style="text-align: center">
            <span>暂无任务</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      projectInfo: {},
      projectId: '',
      taskDate: [],
      projectCalendarCountVoList: [],
      value: new Date(),
      month: '',
      year: '',
      day: '',
      tableData: []

    }
  },
  created() {
    this.changeVal()
    this.getCalendar()
    this.getProjectTaskList()
  },
  methods: {
    // 改变value的值
    changeVal() {
      // 获取当前年月日
      this.year = Number(this.value.getFullYear())// 当前年份
      this.month = Number(this.value.getMonth() + 1)// 当前月份
      this.day = Number(this.value.getDate())// 具体哪一天
    },
    // 获取项目日历
    async getCalendar() {
      const res = await this.$http.get('/reserve/calendar', { params: { month: this.month, year: this.year } })
      console.log('日历', res, this.month, this.year)
      // this.projectInfo = res.data.data
      this.projectCalendarCountVoList = res.data.data
    },
    // 获取项目日历任务列表
    async getProjectTaskList() {
      // console.log(this.year, this.month, this.day)
      // console.log(this.value)
      const res = await this.$http.get('/reserve/calendar/day', { params: { day: this.day, month: this.month, year: this.year } })
      console.log('列表', res)
      this.tableData = res.data.data
      // console.log(this.tableData)
    },
    // 动态渲染当前任务数量
    dealMyDate(val) {
      let res = ''
      // console.log(this.projectCalendarCountVoList, 'list')
      this.projectCalendarCountVoList.filter(item => {
        if (item.date === val) {
          console.log('动态渲当前任务数量', item)
          res = item.count + '项预约'
        }
      })
      return res
    },
    nextMonth(value) {
      const year = this.value.getFullYear()// 当前年份
      const month = this.value.getMonth() + 1// 当前月份
      let day = this.value.getDate()// 当前天数
      let nextyear = year
      let nextmonth = parseInt(month) + 1
      // 判断下一月是否会进入下一年
      if (nextmonth === 13) {
        nextyear = parseInt(year) + 1
        nextmonth = 1
      }
      // 计算下一年下一个月有多少天
      const nextday = new Date(nextyear, nextmonth, 0)
      const nextdays = nextday.getDate()
      if (day > nextdays) {
        day = nextdays
        if (day < 10) {
          day = '0' + day
        }
      }
      if (nextmonth < 10) {
        nextmonth = '0' + nextmonth
      }
      const nexttime = nextyear + '-' + nextmonth + '-' + day

      // 将得到的年月日格式转换为标准时间，与饿了么时间格式相同才能联动
      this.value = new Date(nexttime)
    },
    prevMonth(time) {
      const year = this.value.getFullYear()// 当前年份
      const month = this.value.getMonth() + 1// 当前月份
      let day = this.value.getDate()// 当前天数
      let prevyear = year
      let prevmonth = parseInt(month) - 1
      // 判断上一月是否会进入上一年
      if (prevmonth === 0) {
        prevyear = parseInt(year) - 1
        prevmonth = 12
      }
      // 计算上一年上一个月有多少天
      const prevday = new Date(prevyear, prevmonth, 0)
      const prevdays = prevday.getDate()
      if (day > prevdays) {
        day = prevdays
        if (day < 10) {
          day = '0' + day
        }
      }
      if (prevmonth < 10) {
        prevmonth = '0' + prevmonth
      }
      const prevtime = prevyear + '-' + prevmonth + '-' + day
      // 将得到的年月日格式转换为标准时间，与饿了么时间格式相同才能联动
      this.value = new Date(prevtime)
    },
    // 右侧列表日期转换
    transDate() {
      var year = this.value.getFullYear()
      var month = this.value.getMonth() + 1
      var date = this.value.getDate()
      if (date >= 1 && date <= 9) { // 日如果小于10就补个0
        date = '0' + date
      }
      if (month >= 1 && month <= 9) { // 月如果小于10就补个0
        month = '0' + month
      }
      return year + '年' + month + '月' + date + '日'
    }
  },
  watch: {
    value(newval, oldval) {
      // console.log('新值', newval);
      // console.log('旧值', oldval);
      if (newval !== oldval) {
        this.changeVal()
        this.getCalendar()
        this.getProjectTaskList()
        this.value = newval
        // console.log(this.value, 'value')
      }
    }
  }
}
</script>
<style>
body,
html,
#app {
  min-width: 1100px !important;
}
</style>
<style lang="less" scoped>
.container {
  width: 100%;
  height: auto;
  padding: 0px 20px;
  box-sizing: border-box;
  .title {
    width: 100%;
    height: 50px;
    background: #eeeeee;

    p {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      line-height: 50px;
      margin-left: 20px;
    }
  }
  .cal {
    width: 100%;
    height: auto;

    display: flex;
    justify-content: space-between;
    .left {
      width: 74%;
      height: 720px;
      // .control {
      //   position: absolute;
      //   top: 15px;
      //   left: 35%;
      //   // background: #1160cf;
      //   .prevm {
      //     width: 36px;
      //     height: 36px;
      //     vertical-align: middle;
      //     background: url('') no-repeat center center;
      //     background-size: 100% 100%;
      //     margin-right: 20px;
      //     cursor: pointer;
      //   }
      //   .nextm {
      //     width: 36px;
      //     height: 36px;
      //     vertical-align: middle;
      //     background: url('') no-repeat center center;
      //     background-size: 100% 100%;
      //     margin-left: 20px;
      //     cursor: pointer;
      //   }
      //   /deep/.el-date-editor {
      //     width: 160px;
      //     height: 40px;
      //     font-size: 18px;
      //     font-weight: 500;
      //     color: #0f0f0f;
      //   }
      // }
    }
    .right {
      width: 24%;
      height: 615px;
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
      .title {
        width: 100%;
        height: 89px;
        border-bottom: 1px solid #eee;
        background-color: #fff;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        line-height: 89px;
        text-align: center;
      }
      .detail {
        width: 100%;
        height: 524px;
        overflow: auto;
        border-bottom: 1px solid #eee;
        ul {
          list-style: none;
          margin: 0;
          padding: 0;
          padding-top: 20px;
          li {
            width: 90%;
            height: 64px;
            border-bottom: 1px solid #eeeeee;
            margin: 0 auto;
            margin-bottom: 30px;
            p {
              margin: 0;
            }
            .des1 {
              width: 100%;
              height: 22px;
              display: flex;
              justify-content: space-between;
              margin-bottom: 13px;
              .p1 {
                width: 72px;
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                line-height: 20px;
              }
              .p2 {
                width: 100px;
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                line-height: 20px;
              }
              .p3 {
                width: 68px;
                height: 22px;
                background: #eeeeee;
                border-radius: 11px;
                text-align: center;
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                line-height: 22px;
              }
            }
            .des2 {
              width: 100%;
              height: 20px;
              display: flex;
              justify-content: space-between;
              .p4 {
                width: 120px;
                font-size: 14px;
                font-weight: 400;
                color: #555555;
                line-height: 20px;
              }
              .p5 {
                min-width: 129px;
                font-size: 14px;
                font-weight: 400;
                color: #555555;
                line-height: 20px;
                text-align: right;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="less" scoped>
/deep/.el-calendar {
  height: 100%;
  thead {
    th {
      // width: 166px;
      // height: 54px;
      // padding: 0;
      background-color: #ffffff;
      font-size: 16px;
      color: #222222;
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
      // border-bottom: 1px solid #f1f4ff;
    }
  }
}
/deep/.current p {
  margin: 0;
  text-align: right;
  font-size: 18px;
  font-family: DINAlternate-Bold, DINAlternate;
  color: #555555;
}
/deep/.current span {
  display: block;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #555555;
  line-height: 22px;
  text-align: center;
}
/deep/.prev p {
  margin: 0;
  text-align: right;
  font-size: 18px;
  font-family: DINAlternate-Bold, DINAlternate;

  color: #eaeaea;
}
/deep/.prev span {
  display: block;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;

  color: #eaeaea;
  line-height: 22px;
  text-align: center;
}
/deep/.next p {
  margin: 0;
  text-align: right;
  font-size: 18px;
  font-family: DINAlternate-Bold, DINAlternate;

  color: #eaeaea;
}
/deep/.next span {
  display: block;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;

  color: #eaeaea;
  line-height: 22px;
  text-align: center;
}
/deep/.el-calendar__header {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}
/deep/.el-calendar__body {
  width: 100%;
  padding: 0;
}
/deep/.el-calendar-table thead th:before {
  content: '星期';
}
// 取消日历选中背景
/deep/.el-calendar-table td.is-selected {
  background: #eeeeee;
}
/deep/.el-calendar-table {
  width: 100%;
  // height: 80%;
}
// 日历单元格鼠标经过背景色
/deep/.el-calendar-table .el-calendar-day:hover {
  background: #eeeeee;
}
// 隐藏初始日历切换按钮
// /deep/ .el-calendar__button-group {
//   display: none;
// }
</style>
